<style lang="less" scoped>

.mobile-order {
    background-color: #f4f4f4;
    /* height: 100%; */
    padding-top: 10px;
    padding-top: 2.66vw;
    padding-bottom: 80px;
    padding-bottom: 21.333vw;

    .line{
      margin: 0;
      border-width: 10px;
      border-width: 2.66vw;
      border-color: #f4f4f4;
    }

    .state-ul-bar {
        margin: 0;
        list-style-type: none;
        background-color: #fff;
        padding: 10px 15px;
        padding: 2.66vw 4vw;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;

        li {
            width: 20px;
            width: 5.33vw;
            height: 20px;
            height: 5.33vw;
            border-radius: 100%;
            color: #222222;
            background-color: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            margin-bottom: 8vw;
            position: relative;
            font-size: 12px;
            font-size: 3.2vw;

            span{
              position: absolute;
              top: 150%;
              left: -150%;
              width: 400%;
              text-align: center;
              color: #222222;
            }
        }

        &.normal {
          li{
            &:not(:last-child){
              &:after{
                content: '';
                width: 60px;
                width: 16vw;
                height: 2px;
                background-color: #f4f4f4;
                position: absolute;
                top: 48%;
                left: 180%;
              }
            }

            &.active {
                background-color: #37ca73;
                color: #fff;

                &:after{
                  background-color: #37ca73;
                }
            }
          }
        }

        &.reserve {
          li{
            &:not(:last-child){
              &:after{
                content: '';
                width: 30px;
                width: 8vw;
                height: 2px;
                background-color: #f4f4f4;
                position: absolute;
                top: 48%;
                left: 120%;
              }
            }

            &.active {
                background-color: #37ca73;
                color: #fff;

                &:after{
                  background-color: #37ca73;
                }
            }
          }
        }
    }

    .order-info, .address-info, .total-info {
      margin-top: 10px;
      margin-top: 2.66vw;
      padding: 2.66vw 4vw;
      background-color: #fff;

      .top{
        font-size: 14px;
        font-size: 3.73vw;
        padding-bottom: 10px;
        padding-bottom: 2.66vw;
        border-bottom: 1px solid #e5e5e5;
      }

      .imgs{
        margin-top: 10px;
        margin-top: 2.66vw;

        img{
          width: 90px;
          width: 24vw;
          height: 70px;
          width: 18.6vw;

          margin-bottom: 10px;
          margin-bottom: 2.66vw;
        }
      }

      .mid{
        padding: 15px 0;
        padding: 4vw 0;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;

        img{
          width: 90px;
          width: 24vw;
          height: 70px;
          width: 18.6vw;
        }

        h1{
          margin: 0;
          font-size: 14px;
          font-size: 3.73vw;
          color: #222222;
          padding: 0 10px;
          padding: 0 2.66vw;
          line-height: 15px;
          line-height: 4vw;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          max-height: 30px;
          max-height: 8vw;
        }

        &:not(:last-child){
          border-bottom: 1px solid #e5e5e5;
        }
      }

      .bottom{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        padding: 4vw 0;
      }
      .bottom-history{
        padding: 15px 0;
        padding: 4vw 0;
      }
    }

    .address-info,.total-info{
      .item{
        margin-top: 10px;
        margin-top: 2.66vw;
      }
    }
}

.action-btn{
  &, &:hover, &:focus, &:active {
    border: 0;
    display: block;
    width: 100vw;
    font-size: 18px;
    font-size: 4.8vw;
    padding-top: 15px;
    padding-top: 4vw;
    padding-bottom: 15px;
    padding-bottom: 4vw;
    position: fixed;
    bottom: 0;
    left: 0;
    outline: none;

    &.pay{
      background-color: #64c879;
      color: #ffffff;
    }
  }
}

</style>

<template>

<div class="mobile-order" id="mobileOrder">
    <ul :class="['state-ul-bar', isNormal ? 'normal' : 'reserve']">
        <li v-for="(state, index) in orderState" :class="[ activeIndex(index) ? 'active' : '']">{{index + 1}} <span>{{state.name}}</span> </li>
    </ul>

    <div class="order-info">
      <div class="top">
        <span class="pull-right text-green">{{orderWorkFlowState}}</span>
        订单编号：{{order.order_no}}
      </div>

      <!-- 普通订单的商品列表 start -->
      <a v-if="isNormal" v-for="orderItem in order.all_order_items" :href="'/products/' + orderItem.item_product.id " class="mid">
        <img :src="productImg(orderItem.item_product)" alt="">
        <h1>{{orderItem.item_product.title}}</h1>
        <div>
          <span class="text-dark">￥{{orderItem.item_product.msrp}}</span>
          <br>
          * {{ orderItem.quantity }}
        </div>
      </a>
      <!-- 普通订单的商品列表 end -->

      <a v-else class="mid">
        <h1>{{order.order_survey.name}}</h1>
        <div>
          <span class="text-dark">￥{{order.order_survey.amount}}</span>
          <br>
          * 1
        </div>
      </a>

      <div class="bottom-history text-gray" v-if="history">
          最新进程：
          您在 <span class="text-gray" v-text="parseDate(hsitoryLast.created_at)"></span>
          <span v-text="hsitoryLast.status != 'unpaid' && hsitoryLast.status != 'survey_completed' ? '支付了' : '需支付'"></span>
          <span class="text-red" v-text="hsitoryLast.amount"></span>元,
          现在订单状态为：<span class="text-green" v-text="getStatusStr(hsitoryLast.status)"></span>
      </div>
    </div>

    <div class="order-info" v-if=" history && history.content">
      <div class="top">
        <!-- <div class="pull-right"><i class="fa fa-download text-green"></i>下载图纸</div> -->
        测量图纸
      </div>
      <div class="imgs">
        <a v-for="(paper, index) in history.content" :href="paper" target="_blank"><img :src="paper" alt=""></a>
      </div>
    </div>

<!--     <div class="address-info">
  <div class="top">
    <div class="pull-right"><i class="fa fa-download text-green"></i>下载合同</div>
    合同下载
  </div>
  <div class="imgs">
    <img :src="img" alt="">
    <img :src="img" alt="">
    <img :src="img" alt="">
    <img :src="img" alt="">
    <img :src="img" alt="">
    <img :src="img" alt="">
  </div>
</div> -->

<!--     <div class="order-info" v-if="order.workflow_state === 'survey_completed'">
  <div class="top">
    <div class="pull-right"><i class="fa fa-download text-green"></i>下载合同</div>
    我的合同
  </div>
  <div class="imgs">
    <img :src="attachmentImg" alt="">
  </div>
</div>

<div class="order-info">
  <div class="top">
    安装效果图
  </div>
  <div class="imgs">
    <img :src="img" alt="">
    <img :src="img" alt="">
    <img :src="img" alt="">
    <img :src="img" alt="">
    <img :src="img" alt="">
    <img :src="img" alt="">
  </div>
</div> -->

    <div class="address-info" v-if="order.full_address">
      <div class="top">
        收货地址
      </div>
      <div class="item">
        姓名：<span class="text-gray">{{order.full_address.contact_name}}</span>
      </div>
      <div class="item">
        手机号码：<span class="text-gray">{{order.full_address.cellphone}}</span>
      </div>
      <div class="item">
        地址：<span class="text-gray">{{order.full_address.province}}{{order.full_address.city}}{{order.full_address.district}}{{order.full_address.street}}</span>
      </div>
    </div>
    <!-- <hr class="line"> -->

    <div class="total-info">
      <div class="item">
        商品价格：<span class="text-gray">￥{{order.total_money}}</span>
      </div>
      <div class="top item">
        配送费用：暂无
      </div>
      <div class="item">
        应付总额：<span class="text-red">￥{{order.total_money}}</span>
      </div>
    </div>

    <button class="action-btn pay" @click="pay" v-if="order.workflow_state === 'unpaid'">立即付款</button>
<!--     <button type="button" name="button" class="action-btn pay" v-if="order.workflow_state === 'survey_completed'" @click="fileClick">
  <i class="fa fa-upload"></i>
  上传合同
</button>
<input type="file" ref="fileInput" class="hidden" v-if="order.workflow_state === 'survey_completed'" @change="uploadFile"/> -->
</div>

</template>

<script>
import Util from '../util'
import SuccessDialog from 'success_alert'
import ErrorDialog from 'error_alert'
import Query from '../query'
import Img from '../../../assets/images/zuopin.png'
import Dateformat from 'dateformat'
import _ from 'lodash'

var normalState = [{
    name: '待付款',
    code: 'unpaid'
}, {
    name: '已付款',
    code: 'paid'
}]

var reserveState = [{
    name: '待付款',
    code: 'unpaid'
}, {
    name: '等待测量',
    code: 'survey_pending'
}, {
    name: '待付尾款',
    code: 'survey_completed'
}, {
    name: '定制生产',
    code: 'tail_payment'
}, {
    name: '待安装',
    code: 'install_pending'
}]

export default {
    name: "mobileOrder",

    props: {
        orderData: {
            type: Object,
            required: true
        },
        orderHistoryData: {
            type: Array,
            required: true
        }
    },

    data: () => ({
        img: Img,
        order: '',
        history: '',
        attachmentImg: ''
    }),

    created() {
        this.order = this.orderData
        this.history = this.orderHistoryData
        console.log(this.history);
        // this.attachmentImg = this.order.attachment_img.image.url
        // console.log(this.orderHistoryData);
    },

    mounted: function mounted() {},

    computed: {
        hsitoryLast: {
          get: function() {
            const index = this.history.length - 1
            return this.history[index]
          }
        },

        // 判断是否是普通订单
        isNormal: {
            get: function() {
                return this.order.order_type === 'normal'
            }
        },

        // 计算订单的状态
        orderState: {
          get: function() {
            var states = []

            if (this.order.order_type === 'normal') {
                states = normalState
            } else {
                states = reserveState
            }

            if (this.order.workflow_state === 'failed') {
                states.push({
                    name: '订单关闭',
                    code: 'failed'
                })
            } else {
                states.push({
                    name: '订单完成',
                    code: 'completed'
                })
            }
            return states
          }
        },

        // 显示状态
        orderWorkFlowState: function() {
            let states = reserveState.concat([{
                name: '已付款',
                code: 'paid'
            }, {
                name: '订单关闭',
                code: 'failed'
            }, {
                name: '订单完成',
                code: 'completed'
            }])

            let filterResurce = states.filter((item) => {
                return item.code === this.order.workflow_state
            })

            return filterResurce[0].name
        }
    },

    methods: {
      getStatusStr: function(code) {
        return _.find(this.orderState, function(item) {
                  return item['code'] == code
                })['name']
      },
      parseDate: function(date) {
        return Dateformat(date, 'yyyy-mm-dd')
      },
      activeIndex: function(index) {
          var _this = this
          var activeIndex = 0;
          this.orderState.forEach(function(state, index) {
              if (state.code === _this.order.workflow_state) {
                  activeIndex = index
              }
          })
          if (index <= activeIndex) {
              return true
          } else {
              return false
          }
      },

      // 显示图片
      productImg: function(product) {
        return Util.productImg(product)
      },

      // 显示价格
      priceConvert: function(price) {
        return String(price) + '.0'
      },

      // 立即支付
      pay: function() {
        window.location.href = '/payments/generate_pay?order_no=' + this.order.order_no
      },

      fileClick: function() {
        var fileInput = this.$refs.fileInput
        fileInput.click()
      },

      uploadFile: function(e) {
        var image = new Image()
        var _this = this
        var files = e.target.files || e.dataTransfer.files

        if (!files.length) {
          ErrorDialog.show('网络问题，请重新选择图片')
          return
        }

        if(typeof FileReader==='undefined'){
          ErrorDialog.show('您的浏览器不支持图片上传，请升级您的浏览器')
          return
        }

        var reader = new FileReader()
        reader.readAsDataURL(files[0])

        reader.onload = function(e){
          _this.heToneImage = e.target.result
          Query.post('/orders/' + _this.order.id + '/create_contract_img', {
            image: _this.heToneImage
          }).then((data) => {
            if (data.status === 'ok') {
              _this.attachmentImg = data.attachment.image.url
              console.log(_this.attachmentImg)
              SuccessDialog.show('合同上传成功！')
            } else {
              SuccessDialog.show('网络问题，请重试！')
            }
          }).catch((error) => {
          })
        }
      }
    }
}

</script>
